<template>
  <view>
    <view class="apply">
      <text>{{ name }}的请销假</text>
    </view>
    <view class="apply-container">
      <view class="apply-person">
        <text class="title">申请人</text>
        <view class="name">
          <text class="tag">姓名</text>
          <text>{{ name }}</text>
          <text>（</text>
          <text>{{ num }}</text>
          <text>）</text>
        </view>
      </view>
      <view class="apply-content">
        <text class="title">申请内容</text>
        <view class="form">
          <u-form :model="form">
            <u-form-item  label-width="145" label="审批编号" prop="isOut">
              <text>{{ form.id }}</text>
            </u-form-item>
            <u-form-item label-width="145" label="是否离校" prop="isOut">
              <text>{{ form.isGoOut }}</text>
            </u-form-item>
            <u-form-item label-width="145" label="开始时间" prop="begin">
              <text>{{ form.beginTime }}</text>
            </u-form-item>
            <u-form-item label-width="145" label="结束时间" prop="end">
              <text>{{ form.endTime }}</text>
            </u-form-item>
            <u-form-item label-width="200"  label="本人联系电话" prop="phoneNumber"><text>{{ form.phoneNumber }}</text></u-form-item>
            <u-form-item label-width="165"  label="紧急联系人" prop="emergencyContact"><text>{{ form.emergencyContact }}</text> </u-form-item>
            <u-form-item label-width="200"  label="紧急联系电话" prop="emergencyContactNumber"><text>{{ form.emergencyContactNumber }}</text></u-form-item>
            <u-form-item label-width="220"  label="请假(外出)原因" prop="reason"></u-form-item>
            <u-form-item>
              <text>{{ form.reason }}</text>
            </u-form-item>

            <u-form-item prop="to" label-width="145"  label="请假去向"><text>{{ form.leaveTo }}</text></u-form-item>
          </u-form>
        </view>
      </view>
      <view class="apply-process">
        <text class="title">审批进度</text>
        <view class="audit-process" v-if="form.audit === 2">未审批</view>
        <view class="audit-process" v-if="form.audit === 3">未通过</view>
        <view class="audit-process" v-show="form.audit === 4">已撤销</view>
        <view class="btn" v-show="form.audit === 2">
          <u-button size="medium" shape="circle" type="primary" @click="cancel(form.id)" :ripple="true" ripple-bg-color="#a0cfff">撤销</u-button>
        </view>
        <view class="audit-process" v-if="form.audit === 1">
          <u-time-line>
            <view class="time-line-name">
              <view>
                <text class="name">{{ form.name }}</text>
                <text>（</text>
                <text>{{ form.num }}</text>
                <text>）</text>
              </view>
              <text class="time">{{ form.gmtModified }}</text>
            </view>
            <u-time-line-item>
              <template v-slot:content>
                <view>
                  <view class="time-line-time">
                    <text class="course-category">已同意</text>
                    <view class="image-name">
                      <view v-if="form.audit === 1 && form.auditImg != null && form.auditImg !== ''">
                        <u-image width="100%" height="200rpx" :src="form.auditImg"></u-image>
                      </view>
                    </view>
                  </view>
                  <view class="time-line-title">通过 {{ form.gmtModified }}</view>
                </view>
              </template>
            </u-time-line-item>
          </u-time-line>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: '',
        isGoOut: 1,
        gmtCreate:'',
        beginTime: '',
        endTime: '',
        audit: 1,
        num: '',
        name: '',
        gmtModified: '',
        phoneNumber: '',
        emergencyContact: '',
        emergencyContactNumber: '',
        reason: '',
        leaveTo: '',
        auditImg: ''
      },
      num: '',
      name: '',
    };
  },
  onLoad(e) {
    uni.$emit("setVuexUserInfo",{user:null,isLoginPage: false});
    this.num = this.$store.getters.num;
    this.name = this.$store.getters.name;
    this.$u.api.getAskForLeaveDetailById(e.id,null).then(res => {
      this.form = res.data;
    })
  },
  methods: {
    cancel(id) {
      let data = {
        id: id,
        audit: 4,
        isDelete: 1
      }
      this.$u.api.updateAskForLeave(data).then(res => {
        if (res.code === 200){
          this.form.audit = 4;
          this.$u.toast('撤销成功！')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.btn {
  bottom: 0;
  position: fixed;
  left: 34%;
  margin-bottom: 20rpx;
}
.apply {
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  margin: 20rpx 0 20rpx 0;
}
.apply-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  margin-left: 30rpx;
  .apply-person {
    .title {
      font-size: 25rpx;
      font-weight: bold;
      margin: 20rpx 0 20rpx 0;
    }
    .name {
      margin: 20rpx 0 20rpx 30rpx;
      .tag {
        margin-right: 30rpx;
      }
    }
  }
  .apply-content {
    .title {
      font-size: 25rpx;
      font-weight: bold;
      margin: 20rpx 0 20rpx 0;
    }
    .form {
      margin-left: 30rpx;
    }
  }
  .apply-process {
    .title {
      font-size: 25rpx;
      font-weight: bold;
      margin: 20rpx 0 20rpx 0;
    }

    .audit-process {
      margin: 20rpx 0 20rpx 30rpx;
      color: green;
      .time-line-name {
        display: flex;
        justify-content: space-between;
        margin: 20rpx 0 20rpx 0;
        color: black;
        .time {
          color: green;
          margin-right: 20rpx;
        }
      }
      .time-line-time {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .image-name {
          margin: 20rpx 0 20rpx 0;
        }
      }
      .time-line-title{
        margin: 20rpx 0 20rpx 0;
      }
    }
  }
}
</style>
